import React, { useState, useEffect } from "react";
import {Descriptions, Button, Input} from "antd";
import {
  DOUBLE_WHEEL_ROLLOVER_ANGLE_CALCULATION,
} from "../../uitl/constant-filename";

function DoubleWheelRolloverAngleCalculation() {

  const [B, setB] = useState(null);
  const [F, setF] = useState(null);
  const [C, setC] = useState(null);
  const [D, setD] = useState(null);
  const [E, setE] = useState(null);

  const [readOnly, setReadOnly] = useState(false);

  const [result, setResult] = useState(null);

  useEffect(() => {
    /* command argv */
    window.electronAPI.commandArgv((_event, content) => {
      const objs = JSON.parse(content);
      if (objs.length > 0) {
        setReadOnly(true);
        objs.forEach(obj => {
          if (obj.code === 'QLJ_B') {
            // 前主轮距
            obj.value !== undefined ? setB(obj.value) : setB(100);
          }
          else if (obj.code === 'ZXZLJ') {
            // 主起落架与轴线距离
            obj.value !== undefined ? setF(obj.value) : setF(40);
          }
          else if (obj.code === 'QLJ_C') {
            // 飞行器中线与前起落架轮距
            obj.value !== undefined ? setC(obj.value) : setC(5);
          }
          else if (obj.code === 'QLJ_L') {
            // 重心前限与前轮距
            obj.value !== undefined ? setD(obj.value) : setD(70);
          }
          else if (obj.code === 'QLJ_J') {
            // 重心高度上限
            obj.value !== undefined ? setE(obj.value) : setE(30);
          }
        });
      }
      else {
        setReadOnly(false);
        setB(100);
        setF(40);
        setC(5);
        setD(70);
        setE(30);
      }
    });
  }, []);

  function onChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.value;

    if (name === 'B') {
      setB(value);
    }
    else if (name === 'F') {
      setF(value);
    }
    else if (name === 'C') {
      setC(value);
    }
    else if (name === 'D') {
      setD(value);
    }
    else if (name === 'E') {
      setE(value);
    }
  }

  function calculate() {
    const A = F - C;
    const a = Math.atan(A / B);
    const X = B * C / A;
    const Y = (D + X) * Math.sin(a);
    const result = Math.atan(E / Y) / Math.PI * 180;
    setResult(result);

    const obj = [
      {
        id: '标识',
        name: '名称',
        code: '代号',
        value: '值'
      },
      {
        id: 209,
        name: '侧翻角',
        code: 'QLJ_Θ',
        value: result
      }
    ];

    window.electronAPI.createOutputFile(obj, DOUBLE_WHEEL_ROLLOVER_ANGLE_CALCULATION);
  }

  return <div className={"tyre-selection"}>
    <div className={"sub-title"}>输入参数</div>
    <Descriptions bordered column={4}>
      <Descriptions.Item label="前起落架与主起落架的距离(m)" span={2}>
        <Input value={B} name={"B"} onChange={onChange} readOnly={readOnly} />
      </Descriptions.Item>
      <Descriptions.Item label="主起落架轮与轴线距离(m)" span={2}>
        <Input value={F} name={"F"} onChange={onChange} readOnly={readOnly} />
      </Descriptions.Item>
      <Descriptions.Item label="前起落架轮胎与轴线距离(m)" span={2}>
        <Input value={C} name={"C"} onChange={onChange} readOnly={readOnly} />
      </Descriptions.Item>
      <Descriptions.Item label="前起落架与重心距离(m)" span={2}>
        <Input value={D} name={"D"} onChange={onChange} readOnly={readOnly} />
      </Descriptions.Item>
      <Descriptions.Item label="重心与停机地面线距离(m)" span={2}>
        <Input value={E} name={"E"} onChange={onChange} readOnly={readOnly} />
      </Descriptions.Item>
    </Descriptions>

    <div className={"sub-title"}>
      计算结果
      <Button
        type={"text"}
        onClick={calculate}
        style={{ color: "#1677FF" }}
      >
        计算
      </Button>
    </div>
    <Descriptions bordered column={2}>
      <Descriptions.Item label="双轮侧翻角(°)" span={2}>{result}</Descriptions.Item>
    </Descriptions>
  </div>;
}

export default DoubleWheelRolloverAngleCalculation;
